import { DEFAULT_AVATAR } from "data";
import { For } from "solid-js";
import type { AvatarShape, AvatarSize } from "@/components/Avatar";
import Avatar from "@/components/Avatar";
import Panel from "@/components/Panel";

const shapes: AvatarShape[] = ["circle", "square"];
const sizes: AvatarSize[] = ["sm", "md", "lg"];

export default function Avatars() {
  return (
    <Panel title="Avatars" class="bg-white">
      <div class="flex flex-col gap-4">
        <div class="flex gap-4">
          <For each={shapes}>{(shape) => <Avatar shape={shape} src={DEFAULT_AVATAR} alt="avatar" />}</For>
        </div>
        <div class="flex gap-4 ">
          <For each={sizes}>{(size) => <Avatar size={size} shape="circle" src={DEFAULT_AVATAR} alt="avatar" />}</For>
        </div>
        <div class="flex gap-4 ">
          <For each={sizes}>{(size) => <Avatar size={size} shape="square" src={DEFAULT_AVATAR} alt="avatar" />}</For>
        </div>
      </div>
    </Panel>
  );
}
